<template>
    <div style=" background-image: linear-gradient(to bottom right, #ffffff, #0f94e7);height: 100vh">
        <!--头部-->
        <div style="display: flex;height: 80px;line-height: 60px; border-bottom: 1px solid #ccc;position: relative">
            <div style="width: 300px;text-align: center">
                <img src="../../assets/head.png" alt=""
                     style="width: 70px; position: relative;top: 5px; margin-right: 5px">
                <div style="display:inline-block;text-align: center;font-size: 24px;height: 80px;">社区疫情管理系统</div>
            </div>
            <div style="flex: 1">
                <!--  &lt;!&ndash;                菜单-->
                <!--                  <ul style="list-style: none;background-color: #98F898;">-->
                <!--                      <li class="item"><a href="/login">1</a></li>-->
                <!--                      <li class="item"><a href="/">2</a></li>-->
                <!--                      <li class="item"><a href="/">3</a></li>-->
                <!--                      <li class="item"><a href="/">4</a></li>-->
                <!--                  </ul>&ndash;&gt;-->
            </div>
            <div style="width: 200px">
                <div v-if="!user.username"
                     style="text-align: right;padding-right: 30px;position: absolute;right: 50px;top: 10px;">
                    <el-button @click="$router.push('/login')" type="primary"
                               style="margin-right:40px;height: 50px;width: 110px;font-size: 24px">登录
                    </el-button>
                    <el-button @click="$router.push('/register')" type="primary"
                               style="height: 50px;width: 110px;font-size: 24px">注册
                    </el-button>
                </div>
            </div>
        </div>
        <el-main>
            <el-container>
                <el-aside style="width: 60%">
                    <div>
                        <!-- 轮播图 -->
                        <template>
                            <!--                <el-carousel :interval="4000" type="card" height="444px" style="width: 1100px;margin: 0 auto">   -->
                            <el-carousel :interval="4000" type="card" height="500px" style="width: 1100px;">
                                <el-carousel-item v-for="(item,index) in bannerData" :key="index">
                                    <img :src="item.img" style="height: 500px;width: 600px;"/>
                                    <!--                        <h3 class="medium">{{ item.img }}</h3>-->
                                </el-carousel-item>
                                <!--                    <el-carousel-item v-for="it in bannerData" :key="it.id">-->
                                <!--                        <h3 class="medium">{{ it.img }}</h3>-->
                                <!--                    </el-carousel-item>-->
                                <!--                    <el-carousel-item v-for="item in 6" :key="item">-->
                                <!--                        <h3 class="medium">{{ item }}</h3>-->
                                <!--                    </el-carousel-item>-->
                            </el-carousel>
                        </template>

                    </div>
                </el-aside>
                <el-main style="background-image:linear-gradient(to bottom right, #4eafee, #fff9f9)">
                    <el-divider style="padding: 0"><i class="el-icon-message-solid"
                                                      style="font-size: 20px;background-image:linear-gradient(to bottom right, #4eafee, #fff9f9);padding: 0">通知栏</i>
                    </el-divider>

                    <!-- 通知列表 -->
                    <el-collapse accordion
                                 style="text-align: center; font-size: 20px;background-image:linear-gradient(to bottom right, #4eafee, #fff9f9)">
                        <div v-for="it in noticeData">
                            <el-collapse-item :title="it.title" :name="it.id">
                                <span>{{it.content}}</span>
                            </el-collapse-item>
                        </div>
                    </el-collapse>
                </el-main>
            </el-container>


        </el-main>

        <el-footer style="margin-top: 90px">

            <el-divider></el-divider>
            <el-col>
                <div class="sub-title">
                    <el-card class="box-card"
                             style="background-image: linear-gradient(to bottom right, #dcd8d8, #0f94e7);" t>
                        <h3 style="text-align: right">makabaka</h3>
                        <h3 style="text-align: right">联系方式:1067226583@qq.com</h3>
                    </el-card>
                    <el-divider></el-divider>
                </div>
            </el-col>
        </el-footer>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: "Front",

        data() {
            return {
                user: {},
                noticeData: [], bannerData: [],
            }
        },
        created() {

            this.load()
            this.request.get("/notice/list").then(res => {
                this.noticeData = res.data;
            })
            this.request.get("/banner/list").then(res => {
                this.bannerData = res.data;
            })
        },

        methods: {
            load() {
                this.request.get("/banner/page", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        name: this.name,
                    }
                }).then(res => {

                    this.tableData = res.data.records
                    this.total = res.data.total

                })
            }
        }
    }

</script>

<style>
    /*div{*/
    /*     background-image: linear-gradient(to bottom right, #b2e0fd, #fff9f9);;*/
    /*}*/
    .item {
        display: inline-block;
        width: 100px;
        color: #1E90FF;
        text-align: center;
        cursor: pointer;
    }

    .el-divider__text {
        padding: 0 !important;
    }


    /*.item:hover {*/
    /*    background-color: lightpink;*/
    /*}*/
</style>